<template>
  <div class="title">
      <span @click="()=>router.push({path:'/socialext'})" class="iconfont icon-fanhuijiantou"></span>
      <i>说说</i>
      <span class="iconfont icon-sousuo"></span>
  </div>
  <div class='share'>
    <img src="../../public/img/Leonardo.jpg" alt="">
    <input @keyup.enter="sendMsg" v-model="msg" type="text" placeholder="分享新鲜事..." >
  </div>
</template>

<script setup>
  import {v4 as uuidv4} from 'uuid'
  import * as dayjs from 'dayjs'
  import { ref } from 'vue'
  import {useRouter} from 'vue-router'
  import { useStore } from 'vuex'

  const store = useStore()
  const router = useRouter()
  const msg = ref()
  const sendMsg = () => {
    const data = {
      id: uuidv4(),
      img: require('../../public/img/Leonardo.jpg'),
      time: dayjs().format('HH:mm'),
      writer: msg,
      pv: 0,
      phone: "iPhone8Plus(4G)",
      name: 'Leonardo'
    }
    store.dispatch('puslish', data)
    router.push({path:'/socialext'})
  }
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.title span {
  font-size: 25px;
  color: black;
}

.title i {
  font-size: 15px;
  font-weight: 600;
  color: black;
}

.share {
  display: flex;
  justify-content: space-between;
  margin: 10px 20px;
  align-items: center;
}

.share img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.share input {
  width: 270px;
  height: 30px;
  border-radius: 50px;
  outline: none;
  border: 0;
  padding-left: 10px;
  background-color: rgb(236, 239, 239);
}
</style>